<template>
  <div class="login-container">
    <van-nav-bar title="登录" />
    
    <div class="login-form">
      <van-form @submit="onLogin">
        <van-cell-group inset>
          <van-field
            v-model="form.username"
            name="用户名"
            label="用户名"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请输入用户名' }]"
          />
          <van-field
            v-model="form.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请输入密码' }]"
          />
        </van-cell-group>
        
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
          
          <van-button round block plain type="primary" style="margin-top: 10px;" @click="$router.push('/register')">
            注册新账号
          </van-button>
        </div>
      </van-form>
      
      <div class="admin-tip">
        <van-icon name="info-o" />
        <span>管理员账号: szllflxy 密码: rongcheng16888A</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { useAuthStore } from '../stores/auth'

const router = useRouter()
const authStore = useAuthStore()

const form = ref({
  username: '',
  password: ''
})

const onLogin = async () => {
  const result = await authStore.login(form.value.username, form.value.password)
  
  if (result.success) {
    showToast('登录成功')
    router.push('/bills')
  } else {
    showToast(result.error)
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.login-form {
  padding-top: 50px;
}

.admin-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 20px;
  color: #666;
  font-size: 14px;
}
</style>
